<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100%;
            height: 100%;
            background-color: black;
            background-image: gradient(radial,
		                        50% 400, 1,
		                        50% 400, 400,
		                        from(rgba(255, 255, 255, 0.3)),
		                        to(rgba(255, 255, 255, 0)));
		    background-repeat: no-repeat;
            /* background: url("./11.jpg"); */
            /* background-repeat:no-repeat; */
            overflow: hidden;
            transition: all 2s linear;
        }

        #wind {
            width: 100%;
            height: 100%;
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;
        }
 /*初始 输入框 未翻转*/
        #plane.front {
            transform: rotateY(0deg);
        }

        /* 飞机翻转之后的样式  背景色渐变 */
        #plane {
            background-color: rgba(255, 255, 255, 0.15);
            transform: rotateY(-180deg);
            position: relative;
            box-sizing: border-box;
            padding: 20px;
            text-align: center;
            backface-visibility: hidden;
            width: 400px;
            height: 260px;
            top: 240px;
            transition: all 0.8s ease-in-out;
            margin: auto;
            /* display: none; */
        }

        /* 文本框输入信息 */
        .message {
            width: 100%;
            max-width: 360px;
            min-height: 100px;
            max-height: 180px;
            box-sizing: border-box;
            padding: 10px;
            box-sizing: 140px;
            font-size: 18px;
            line-height: 20px;
            color: transparent;
            -webkit-text-stroke: 1px black;
            letter-spacing: 0.04em;
        }

        /* 发送按钮样式 */
        .send {
            transition: all 0.3s ease-in-out;
            border: 2px solid hsl(194, 100%, 72%);
            /*Hue 色调  0-360  Saturation 0%-100%   Lightness 0%-100%*/
            margin: 15px 0;
            padding: 10px;
            outline: none;
            font-size: 16px;
            cursor: pointer;
            background-color: hsl(0, 0%, 94%);
            border-radius: 4px;
        }

        .send:active {
            transform: scale(0.85);
            transition: all 10ms ease-in-out;
            background-color: hsl(0, 0%, 85%);
            border: 2px solid hsl(194, 30%, 55%);
        }

        #plane_bottom {
            position: absolute;
            right: 7px;
            bottom: 0;
            width: 30px;
            height: 30px;
        }

        #plane_close {
            color: white;
            text-decoration: none;
        }
/*飞机纸*/
        #wind_container {
            perspective: 600;
            perspective-origin: 200px 131px;
            transform-style: preserve-3d;
            transition: all 0.8s ease-in-out;
            backface-visibility: hidden;
            position: relative;
            width: 400px;
            height: 260px;
            margin: auto;
        }

/* 翻转至正面 */
        #wind_container.beginning {
            transform: rotateY(180deg);
        }

        #left-wing,
        #right-wing {
            transform-style: preserve-3d;
            width: 200px;
            height: 260px;
            display: block;
            position: absolute;
            top: 0;
            transition: all 1s ease-in-out;
        }

        /* 左右机翅旋转中心 */
        #left-wing {
            transform: rotateZ(0deg);
            transform-origin: 100% 50% 0;
            left: 0;
        }

        #right-wing {
            transform: rotateZ(0deg);
            transform-origin: 0 50%;
            left: 199px;
        }

        /* 机翼 */
        .wing {
            position: absolute;
            transform-origin: 0 0 0;
            perspective: 1;
            perspective-origin: 50% 50%;
            backface-visibility: hidden;
            transition: all 1.3s linear;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            background: none;
            border: none;
            border-top: 240px solid hsla(0, 0%, 0%, 0);
            border-bottom: 0px solid hsla(0, 0%, 0%, 0);
            border-right: 100px solid hsl(0, 0%, 88%);
            width: 0;
            height: 0;
            bottom: 0;
        }

        /* 飞机形状绘制 */
        .wing1 {
            transform-origin: 100% 100%;
            transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) skewY(-22.62deg);/*2D图像的偏移 旋转*/
        
        }

        .wing2 {
            transform: rotateZ(22.62deg);
            transform-origin: 100% 100%;
            border-left: 100px solid hsl(0, 0%, 88%);
            border-right: none;
            left: 100px;
        }

        .wing3 {
            transform: rotateZ(-22.62deg);
            transform-origin: 0% 100%;
            /* left: 0.999999999999999px; */
            border-right: 100px solid hsl(0, 0%, 88%);
        }

        .wing4 {
            transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) skewY(22.62deg);
            transform-origin: 0% 100%;
            border-right: none;
            border-left: 100px solid hsl(0, 0%, 88%);
            left: 101px;
        }


		/*绘制被翻折部分  机翼 */
        /* 左侧填充 */
        .curvable.top_left {
            transform-origin: 100px 112px;
            transition-delay: 1200ms;
            width: 0;
            height: 0;
            top: 0;
            border-right: 202px solid hsla(0, 0%, 0%, 0);
            border-bottom: 202px solid hsla(0, 0%, 0%, 0);
            border-top: 223px solid hsl(0, 0%, 88%);
        }

        /* 右侧填充 */
        .curvable.top_right {
            transform-origin: 96px 112px;
            transition-delay: 1800ms;
            width: 0;
            right: 0;
            height: 0;
            top: 0;
            border-left: 202px solid hsla(0, 0%, 0%, 0);
            border-bottom: 202px solid hsla(0, 0%, 0%, 0);
            border-top: 224px solid hsl(0, 0%, 88%);
        }

        /* 两侧下方机尾 */
        .bottom_left.curvable {
            transform-origin: 109px 0;
            transition-delay: 2200ms;
            width: 109px;
            height: 38px;
            background: hsl(0, 0%, 88%);
            bottom: 0;
            left: 0;
        }

        .bottom_right.curvable {
            transform-origin: 0px 0;
            transition-delay: 2600ms;
            width: 109px;
            height: 38px;
            background: hsl(0, 0%, 88%);
            bottom: 0;
            right: -2px;
        }
/*补全 折叠尾翼 剩余 三角区域*/
        .bottom_left.curvable:after {
            position: absolute;
            content: "";
            border-right: 92px solid hsla(0, 0%, 0%, 0);
            border-bottom: 39px solid hsla(0, 0%, 88%);
            border-top: 37px solid hsl(0, 0%, 0%, 0);
            left: 109px;
            bottom: 0;
        }

        .bottom_right.curvable:after {
            position: absolute;
            content: "";
            border-left: 92px solid hsla(0, 0%, 0%, 0);
            border-bottom: 39px solid hsla(0, 0%, 88%);
            border-top: 37px solid hsl(0, 0%, 0%, 0);
            left: -92px;
            bottom: 0;
        }

/*折叠效果*/
        .curvable {
            transition: transform 800ms ease-out;
            backface-visibility: hidden;
            position: absolute;
            background-color: transparent;
            z-index: 0;
            width: 0;
        }

        /* 折叠： */
        /* 折叠效果（左机翼、左尾翼） */
        .top_left.curvable.curved {
            transform: rotate3d(1, -1.11, 0, 180deg);
        }

        .bottom_left.curvable.curved {
            transform: rotate3d(2.4867, -1.11, 0, -180deg);
        }

 /* 折叠效果（右机翼、右尾翼）*/
        .top_right.curvable.curved {
            transform: rotate3d(1, 1, 0, 180deg);
        }

        .bottom_right.curvable.curved {
            transform: rotate3d(-2.4867, -1, 0, 180deg);
        }
/* 平放一整个飞机 */
        #wind_container.hover {
            transform: rotateX(54deg) rotateY(-10deg) rotateZ(25deg);
            transition-delay: 0.5s;
        }
/*放平之后 左侧整体倾斜 （体现折叠效果）*/
        #wind_container.hover #left-wing {
            transform: rotateY(60deg);
        }

        #wind_container.hover #right-wing {
            transform: rotateY(-60deg);
        }
/* 3d视觉中放平 左侧机翼*/
        #wind_container.hover .wing1 {
            transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) rotateY(-60deg) skewY(-22.62deg);
            border-right: 100px solid hsl(0, 0%, 95%);
        }
/*左侧 飞机手持部位透明度降低*/
        #wind_container.hover .wing2 {
            border-left: 100px solid hsl(0, 0%, 85%);
        }
/* 3d视觉中放平 右侧机翼*/
        #wind_container.hover .wing4 {
            transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) rotateY(60deg) skewY(20deg);
            border-left: 100px solid hsl(0, 0%, 95%);
        }

		/*右侧 飞机手持部位透明度降低*/
        #wind_container.hover .wing3 {
            border-left: 100px solid hsl(0, 0%, 71%);
        }

		/*机翼 折叠效果（右机翼、右尾翼） 之后 多余部分隐藏掉*/
        #wind_container.hover .curved {
            display: none;
        }

        #wind_container.hover.fly_away_first {
            transform: translateX(-100px) translateZ(300px) rotateX(42deg) rotateY(-11deg) rotateZ(27deg);
            transition-delay: 0;
            transition-duration: 0.4s;
            transition-timing-function: ease-out;
        }

        #wind_container.hover.fly_away_first.fly_away {
            transform: translateX(600px) translateY(-400px) translateZ(-5000px) rotateX(66deg) rotateY(-12deg) rotateZ(36deg);
            transition: transform 2s ease-out, opacity 1.5 0.5s linear;
            opacity: 0;
        }
    </style>
</head>
<script src="./jquery.min.js"></script>

<body>
    <div id="wind">
        <div id="plane" class="front">
            <form action="#">
                <textarea class="message">滚TM的Dream....自己慢慢熬吧!!!</textarea>
            </form>
            <button class="send">Go</button>
            <div id="plane_bottom">
                <a href="javascript:;" id="plane_close">X</a>
            </div>
        </div>
        <div id="wind_container" class="beginning">
            <div id="left-wing">
                <div class="top_left curvable"></div>
                <div class="bottom_left curvable"></div>
                <div class="wing wing1"></div>
                <div class="wing wing2"></div>
            </div>
            <div id="right-wing">
                <div class="top_right curvable"></div>
                <div class="bottom_right curvable"></div>
                <div class="wing wing3"></div>
                <div class="wing wing4"></div>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            $(".send").click(function () {
                setTimeout(function () {
                    $("#plane").removeClass("front");
                    $("#wind_container").removeClass("beginning");
                    $(".curvable").addClass("curved");
                    $("body").css({
                        "background-color": "#54575A"
                    });
                    setTimeout(function () {
                        $("#wind_container").addClass("hover");
                        $("body").css({
                            "background-color": "#AD8B8D"
                        });
                        setTimeout(function () {
                            $("#wind_container").addClass("fly_away_first");
                            $("body").css({
                                "background-color": "#6e99c4"
                            });
                            setTimeout(function () {
                                $("#wind_container").addClass("fly_away");
                                $("body").css({
                                    "background-color": "#3f9bff"
                                });
                                setTimeout(function () {
                                    $("#plane").addClass("front");
                                    $("#wind_container").removeClass("fly_away fly_away_first hover").addClass("beginning");
                                    $(".curvable").removeClass("curved");
                                    $("body").css({
                                        "background-color": "#000"
                                    });
                                }, 3000);
                            }, 600);
                        }, 2000);
                    }, 2800);
                }, 200);
            })
        })

        $("#plane_close").click(function(){
            $("#wind").fadeOut(200);
        })
    </script>
</body>

</html>